<template>

	<el-drawer :title="title" v-model="showDrawer" :size="size" :close-on-click-modal="false"
		:destroy-on-close="destroyOnClose">
		<div class="formDrawer">
			<div class="body">
				<slot></slot>
			</div>
			<div class="active">
				<el-button type="primary" @click="submit">{{ confirmText }}</el-button>
				<el-button type="default" @click="close">取消</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const showDrawer = ref(false);
	const loading = ref(false); // 定义 loading 变量

	const showLoading = () => loading.value = true;
	const hideloading = () => loading.value = false; // 修正方法名拼写错误

	const props = defineProps({
		title: String,
		size: {
			type: String,
			default: "45%"
		},
		destroyOnClose: {
			type: Boolean,
			default: false
		},
		confirmText: {
			type: String,
			default: "提交"
		}
	});

	// 打开抽屉
	const open = () => showDrawer.value = true;

	// 关闭抽屉
	const close = () => showDrawer.value = false;

	// 提交
	const emit = defineEmits(["submit"]);
	const submit = () => emit("submit");

	// 向父组件暴露方法
	defineExpose({
		open,
		close,
		showLoading,
		hideloading // 修正暴露的方法名拼写错误
	});
</script>

<style>
	.formDrawer {
		width: 100%;
		/* 修正宽度属性 */
		height: 100%;
		position: relative;
		@apply flex flex-col;
	}

	.formDrawer .body {
		flex: 1;
		position: absolute;
		top: 0;
		right: 1px;
		/* 添加单位 */
		bottom: 50px;
		overflow-y: auto;
		width: 100%;
	}

	.formDrawer .active {
		height: 50px;
		@apply mt-auto flex items-center;
	}
</style>